import React, { Component } from 'react';
import {connect} from 'react-redux';

import { InputItem ,Button, WhiteSpace, List, NavBar } from 'antd-mobile';
import {getMsgList,emitMsg,getMsgRecv} from '../../redux/chat';

let Item = List.Item;
class Chat extends Component {
    constructor() {
        super();
        this.state = {
            text:'',
            chatList:[]
        }
    }
    componentDidMount() {
        let chaterId = this.props.match.params.user;
        this.props.getMsgList(chaterId);
        this.props.getMsgRecv();
    }
    render() {
        let toId = this.props.match.params.user;
        return (
            <div style={{"height":"100%"}}>
                <NavBar mode="dark">
                    {this.props.chatList.users.user}
                </NavBar>
                <div style={{"paddingTop":44}}>
                    {this.props.chatList.msgLst.map(function(item,index) {
                        // return <p key={item._id}>{item.content}</p>
                        // console.log(item.to);
                        return <List className="my-list" key={item._id}>
                            {item.to === toId?<Item
                                extra="10:30"
                                align="top"
                                thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                                // multipleLine
                            >
                                {item.content}
                                {/* <Item.Brief>subtitle</Item.Brief> */}
                            </Item>:<Item 
                                // extra="10:30"
                                align="top"
                                thumb="https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"
                                // multipleLine
                            >
                                {item.content}
                                {/* <Item.Brief>subtitle</Item.Brief> */}
                            </Item>}
                      </List>
                    })}
                </div>
                <div style={{"height":200,"backgroundColor":"#eee"}}></div>
                <InputItem
                    style={{"position":"absolute","bottom":0}}
                    value={this.state.text}
                    onChange={(v) => this.textChange(v)}
                ></InputItem>
                <Button type="primary" onClick={this.emitMessage}>发送</Button><WhiteSpace />
            </div>
        );
    }
    textChange = (v) => {
        this.setState({
            text:v
        })
    }
    emitMessage = () => {
        let from = this.props.user._id;
        let to = this.props.match.params.user;
        let msg = this.state.text;
        this.props.emitMsg({from,to,msg});
        this.setState({
            text:''
        })
    }
}

const mapStateToProps = (state) => {
    return {
        user:state.registerReducer,
        chatList:state.msgReducer
    }
}
const mapDispatchToProps = {getMsgList,emitMsg,getMsgRecv};
export default connect(mapStateToProps,mapDispatchToProps)(Chat);
